import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';

import {List, ListItem} from 'material-ui/List';
import { Transactions } from '../api/transaction/transactions.js';
import { Users } from '../api/users/users.js';
import { Session } from 'meteor/session'

import Divider from 'material-ui/Divider';
import Subheader from 'material-ui/Subheader';
import Avatar from 'material-ui/Avatar';
import {grey400, darkBlack, lightBlack} from 'material-ui/styles/colors';
import IconButton from 'material-ui/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem'; 

import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import Tab1List from './Tab1List.jsx';
import Tab4 from './Tab4.jsx';


const styles = {
  footer:{
    position: 'fixed',
    bottom: 0,
    width: '100%',
  },
}
export class Tab1 extends Component {
  constructor(props) {
    super(props)
    let cuser=  Session.get("currentUser");
    this.state = {
      open: false,
      cuser:cuser,
    };
  }
componentDidMount(x,y,z){
  this.setState({cw:window.innerWidth,ch:window.innerHeight});
}  
handleClose(){
  this.setState({open:false});
}
renderItems(){
  let result = []; 
  let cuser =  this.state.cuser;
  let tmap = {};

  this.props.items.map((item) => {
    //我发起的交易
      let bFrom = (item.userFrom===cuser.userId);
      let avatar = bFrom? item.avatarTo: item.avatarFrom;
      let title = bFrom?item.titleTo: item.titleFrom;
      let uid = bFrom?item.userTo: item.userFrom;

      let ti = tmap[uid];
      if(ti){
        ti.unshift(item);
      }else{
        ti = [item];
        tmap[uid] = ti;
        result.push(
          <ListItem
            key = {item.transactionId}
            onTouchTap={e => this.setState({open:true, tuid:uid})}
            leftAvatar={<Avatar src={avatar} />}
            primaryText={title}
            secondaryText={
              <p>
                <span style={{color: darkBlack}}>{item.createdAt.toLocaleString()}</span> <br/>
                {item.title}
              </p>
            }
            secondaryTextLines={2}
          />
        
      );
      result.push( <Divider key={'dv_'+item.transactionId} inset={true} />);
    }
  }
  );
  return result;
}
render() {
    return (
    <div>
      <List>
        {this.renderItems()}
      </List>

    <Drawer width={this.state.open?this.state.cw:0} containerStyle={{position:'fixed',top:0,overflowY:'hidden'}} 
      openSecondary={true} open={this.state.open} >
          <Tab1List
            tuid={this.state.tuid}
            cuid={this.state.cuser.userId}
            handleClose={this.handleClose.bind(this)}
          />
     </Drawer>      
    </div>
    );
  }
}

Tab1.propTypes = {
  items: PropTypes.array.isRequired,
};

export default createContainer((props) => {
  let query ={};
  Meteor.subscribe('transactions_recent');
  if(props.searchText){
    let rtx = ".*" + props.searchText + ".*";
    //匹配titleFrom,titleTo,title 三个字段
    query={$or:[{"titleFrom": {$regex: rtx}},{"titleTo": {$regex: rtx}},{"title": {$regex: rtx}}]}
  }
  return {
    items: Transactions.find(query, { }).fetch(),
  };
}, Tab1);